<template>
  <div class="index-main">
    <!-- 搜索区域 -->
    <div class="search-box">
      <div class="div_1">
        <el-select placeholder="选择类别" v-model="formLabelAlign_search.typeid">
          <el-option label="环境-3D" value="1"></el-option>
          <el-option label="艺术品-3D" value="2"></el-option>
          <el-option label="植物-3D" value="3"></el-option>
          <el-option label="物品-3D" value="4"></el-option>
          <el-option label="粒子动画" value="5"></el-option>
          <el-option label="艺术品-2D" value="6"></el-option>
          <el-option label="视频" value="7"></el-option>
          <el-option label="材料" value="8"></el-option>
          <el-option label="音乐" value="9"></el-option>
        </el-select>
      </div>
      <div class="div_2">
        <el-input
          type="text"
          id="search"
          v-model="formLabelAlign_search.goodname"
        ></el-input>
      </div>
      <div class="div_3">
        <el-button
          class="searchbutton"
          style="color: white"
          @click="getMygoodsDataQuery()"
        ><i class="el-icon-search"></i>
        </el-button>
      </div>
    </div>
    <div class="index-buttom">
      <div class="classes">
        <div class="text_style" v-if="typeid!=undefined">
          <span class="chinese">{{ formatStatusID(this.typeid) }}</span>
          <span class="english">{{ formatStatusName(this.typeid) }}</span>
        </div>
        <div class="div_">
          <div
            class="div_n"
            v-for="good in goods_typeid"
            :key="good.goodid"
          >
            <img 
              :src="good.coverurl"
              alt="轮播图片"
              class="img_size"
              @click="getGoodsTypeDetail(good)"
            />
            <span class="floattext">{{ good.goodname }}</span>
          </div>
        </div>
        <!-- <ul class="class_ul">
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>

          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
        </ul> -->
      </div>
      <!-- 商品详情 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose"
        show-close="false"
        close-on-press-escape
        :model="tableDetail"
        class="goodsDetails"
      >
        <div class="detailsContainer">
          <div class="row_1">
            <div class="column_1">
              <el-carousel>
                <el-carousel-item v-for="imgUrl in imgUrls" :key="imgUrl">
                  <img :src="imgUrl" alt="封面图片" class="imgsize"/>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="column_2">
              <span class="goodnameSpan">{{ tableDetail.goodname }}</span>
              <img
                src="../../assets/images/heart_1.png"
                alt="封面图片"
                class="imgsizeIcon"
                v-on:click="doCollectionGoods(tableDetail.goodid)"
                v-if="collectionStatus[index].status == false"
              />
              <img
                src="../../assets/images/heart.png"
                alt="封面图片"
                class="imgsizeIcon"
                v-if="collectionStatus[index].status == true"
              />
              <div class="row_1 card_limit">
                <el-card shadow="never">
                  <span class="font_style1">
                    Token ID : {{tableDetail.tokenid}}
                  </span>
                </el-card>
                <span
                  class="el-icon-document-copy copyLink"
                  v-clipboard:copy="tableDetail.tokenid"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                ></span>
              </div>
              <p class="font_style2">作者 ：{{ tableDetail.user }}</p>
              <p class="font_style2">分类 ：{{ tableDetail.type }}</p>
              <span class="font_style3">价格：￥{{ tableDetail.price }}</span>
              <div class="button_select">
                <!-- <el-button class="buybutton" @click="gotoBuy">
                  <el-link
                    :href="tableDetail.documenturl"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">下载</p>
                  </el-link>
                </el-button> -->
                <el-button class="buybutton" @click="gotoBuy">
                  <el-link
                    :href="tableDetail.mesh"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  mesh</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.albedo"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  albedo</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.normal"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  normal</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.mask"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  mask</p>
                  </el-link>
                  <el-link
                    :href="tableDetail.emissive"
                    target="_blank"
                    class="xiazai"
                  ><p class="font_style3_xiazai">  emissive</p>
                  </el-link>
                </el-button>
              </div>
            </div>
          </div>
          <div class="row_2">
            <span class="font_style3">商品简介：</span>
            <el-card shadow="always" class="details-card">
              <p class="font_style2">
                {{ tableDetail.introduction }}
              </p>
            </el-card>
          </div>
          <div class="row_2">
            <span class="font_style3">历史交易记录：</span>
            <el-card shadow="always" class="details-card">
              <div class="records">
                <div>
                  <p class="font_style3">日期</p>
                  <p class="font_style2">{{ tableDetail.transaction.date }}</p>
                </div>
                <div>
                  <p class="font_style3">价格</p>
                  <p class="font_style2">{{ tableDetail.transaction.price }}</p>
                </div>
                <div>
                  <p class="font_style3">拥有者</p>
                  <p class="font_style2">{{ tableDetail.transaction.owner }}</p>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-dialog>
      <!-- 订单详情 -->
      <!-- <el-dialog
        :visible.sync="dialogVisible1"
        title="订单详情"
        class="orderDetails"
        :before-close="handleClose"
        show-close="false"
        close-on-press-escape
        :model="tableDetail"
      >
        <div class="orderContent">
          <div class="order">
            <div class="div1">
              <img
                :src="tableDetail.coverurl"
                alt="封面图片"
                class="imgsizeOrder"
              />
            </div>
            <div class="div2">
              <p class="font_style3">枕头</p>
              <p class="font_style2">上架日期：2021-12-12</p>
              <p class="font_style2">规格：27cm*63*33cm</p>
            </div>
            <div class="div3">
              <img src="../../assets/images/product.png" class="imgsizeSign" />
              <p class="font_style4">1</p>
            </div>
          </div>
          <div class="amount">
            <h1 class="font_style5">合计：￥25</h1>
          </div>
          <div class="buyclick">
            <el-button class="buybutton_style" @click="gotobank()"
              >支付</el-button
            >
          </div>
        </div>
      </el-dialog> -->
      <!-- 支付页面 -->
      <!-- <el-dialog
        :visible.sync="dialogVisible2"
        class="payment"
        :before-close="handleClose"
        show-close="false"
        close-on-press-escape
        :model="tableDetail"
      >
        <div class="paymentContent">
          <div class="amount_1">
            <h1 class="font_style6">合计：￥25</h1>
          </div>
          <div class="payment_select">
            <el-radio v-model="radio1" label="1" border class="radioone"
              >支付方式一</el-radio
            >
            <el-radio v-model="radio1" label="2" border class="radiotwo"
              >支付方式二</el-radio
            >
          </div>
          <div class="buyclick">
            <el-button class="buybutton_style" @click="gotobank()"
              >支付</el-button
            >
          </div>
        </div>
      </el-dialog> -->
      <!-- <br /> -->
      <!-- <div class="classes">
        <div class="text">
          <span class="chinese">艺术品</span>
          <span class="english">Artwork</span>
          <a href="#/admin/goods/goodsindex"
            ><i class="el-icon-arrow-right"></i
          ></a>
        </div>
        <ul class="class_ul">
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
             <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
        </ul>
      </div> -->
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="currentpage"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 30px; text-align: center"
      >
        <el-button
          style="
            border: 1px solid;
            border-color: #b4bccc;
            padding: 0px;
            margin-left: 6px;
          "
          size="mini"
          @click="handleCurrentChange"
          >GO</el-button
        >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getAllData, doCollection, getGoodDetail } from "crm/goods/goods.js";
import { EventBus } from "bus/mybus.js";
export default {
  // name:"secondsmenu",
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      radio1: "1",
      radio2: "1",
      formLabelAlign_search: {
        typeid: undefined,
        goodname: "",
      },
      tableData: [],
      currentpage: 1,
      pagesize: 10,
      total: 0,
      total_pics: 0,
      imgUrls: [],
      collectionStatus: [{
        id:0,
        status:false,
      }
      ],
      // collectionStatus: [],      
      index:0,
      typename: this.$route.params.typename,
      typeid: this.$route.params.typeid,
      // typeChineseName: "",
      // typeEnglishName: "",
      goods_typeid: [],
      goods:{
        goodid: 0,
        coverurl: "",
        covername: "",
        goodstatus: 0,
        goodname: "",
        price: 0.0,
      },
      tableEdit: [],
      //商品详情
      tableDetail:
        {
          goodid: "",
          goodurlname: "",
          price: 0,
          type: "",
          goodname: "",
          coverurl: "",
          covername: "",
          user: "",
          userid: "1",
          pics: {
            picurl: "",
            picname: "",
          },
          documenturl: "",
          documentname: "",
          transaction:{
            date: "",
            price: 12.6,
            owner: "",
            },
          introduction: "",
          tokenid: 0,
        },
    };
  },
  // props:['typeId','name'],
  // beforeCreate(){
  //   if(this.typeid !== undefined){
  //     localStorage.setItem("typeid",this.typeid);
  //   }else{
  //     this.typeid = localStorage.getItem("typeid");
  //   }
  //   console.log(this.typeid);
  // },
  created() {
      if(this.typeid!=undefined){
        localStorage.setItem("typeid",this.typeid);
      }else{
        this.typeid = Number(localStorage.getItem("typeid"));
      }
      // console.log(this.typeid);
      // console.log(typeof(this.typeid));
      this.getSomegoodsData();
      // this.formatStatusID(this.typeid);
      // this.formatStatusName(this.typeid);
      // //在页面加载时读取sessionStorage里的状态信息
      // if ( sessionStorage.getItem('state') ) {
      //   this.$store.replaceState( Object.assign( {}, this.$store.state,
      //   JSON.parse(sessionStorage.getItem('state') ) ) )
      // }

      // //页面刷新时将state数据存储到sessionStorage中
      // window.addEventListener('beforeunload',()=>{
      //   sessionStorage.setItem('state',JSON.stringify(this.$store.state) )
      // })
  },
  mounted() {
    this.getSomegoodsData();
    // this.formatStatusID(this.typeid);
    // this.formatStatusName(this.typeid);
  },
  methods: {
    // handleUpdateClick() {
    //   // built-in
    //   this.$forceUpdate()
    // },
    downLoad() {
      window.location.href = this.tableDetail.documenturl;
    },
    //类型对应
    formatStatusID(row) {
      switch (row) {
        case 1:
          return "环境-3D";
        case 2:
          return "艺术品-3D";
        case 3:
          return "植物-3D";
        case 4:
          return "物品-3D";
        case 5:
          return "粒子动画";
        case 6:
          return "艺术品-2D";
        case 7:
          return "视频";
        case 8:
          return "材料";
        case 9:
          return "音乐";
      }
    },
    //类型对应
    formatStatusName(row) {
      switch (row) {
        case 1:
          return "Environment-3D";
        case 2:
          return "Artwork-3D";
        case 3:
          return "Plants-3D";
        case 4:
          return "Artical-3D";
        case 5:
          return "Particle";
        case 6:
          return "Artwork-2D";
        case 7:
          return "Video";
        case 8:
          return "Meterial";
        case 9:
          return "Music";
      }
    },
    // 收藏操作
    doCollectionGoods(goodid) {
      let payload = {};
      payload.userid = Number(localStorage.getItem("userid"));
      payload.goodid = goodid;
      console.log(typeof(goodid));
      doCollection(payload)
        .then((res) => {
          if (res.data.status == "OK") {
            // console.log(this.collectionStatus);
             
            // if(this.collectionStatus.findIndex({ id:goodid,
            //   status:true,}) !== -1){
            //            this.index = this.collectionStatus.findIndex({ id:goodid,
            //   status:false,});
            //   }else if(this.collectionStatus.findIndex({ id:goodid,
            //   status:false,}) !== -1){
            // //  this.ocllectionStatus.push({
            // //   id:goodid,
            // //   status:true,
            // //  })
            //   this.index = this.collectionStatus.findIndex({ id:goodid,
            //   status:false,});
            //   this.collectionStatus[this.index] = {
            //     id:goodid,
            //       status:true,
            //   }
            // }else{
            //   this.collectionStatus.push({
            //   id:goodid,
            //   status:true,
            //  })
            //  this.index=this.collectionStatus.length-1;
            // };
            // console.log(this.collectionStatus);
            alert("收藏成功！");
          } else {
            alert("收藏失败！");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //点击购买之后跳出弹出框
    gotoBuy() {
      this.dialogVisible = false;
      this.dialogVisible1 = true;
      this.dialogVisible2 = false;
    },
    gotobank() {
      this.dialogVisible = false;
      this.dialogVisible1 = false;
      this.dialogVisible2 = true;
    },
    //分页操作
    handleCurrentChange(val) {
      this.currentpage = val;
      this.getSomegoodsData();
    },
    //搜索..
    doSearch() {
      this.currentpage = 1;
      this.getSomegoodsData();
    },
    //分页加载..
    goToPage(val) {
      this.currentpage = val;
      this.getSomegoodsData();
    },
    //获取页面初始化数据
    getSomegoodsData() {
      let payload = {};
      payload.typeid=this.typeid;
      // console.log(this.typeid);
      // console.log(typeof(this.typeid));
      payload.pageSize = this.pagesize;
      payload.currentPage = this.currentpage;
      // this.typeChineseName = this.formatStatusID(this.typeid);
      // this.typeEnglishName = this.formatStatusName(this.typeid);
      // console.log(this.typeChineseName);
      // console.log(this.typeEnglishName);
      getAllData(payload)
        .then((res) => {
          if (res.status == "OK") {
            // this.types = res.data.types;
            // console.log(this.types)
            this.tableData = res.data;
            this.total = res.data.types.length;
            for (let i = 0; i < this.total; i++) {
              // 只能用==？
              if (this.tableData.types[i].typeid == this.typeid) {
                this.goods_typeid = this.tableData.types[i].goods;
              }
            }
            // console.log(this.typename);
            // console.log(this.typeid);
            // console.log(this.goods);
            // console.log(this.tableData.types[0]);
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //获取商品查询结果（全部商品查询（按类别））
    getMygoodsDataQuery() {
      let payload = {};
      payload.typeid = this.formLabelAlign_search.typeid;
      payload.goodname = this.formLabelAlign_search.goodname;
      payload.pageSize = this.pagesize;
      payload.currentPage = this.currentpage;
      getAllData(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableData = res.data;
            this.total = res.data.types.length;
            this.typeid = res.data.types[0].typeid;
            this.goods_typeid = [];
            console.log(this.typeid);
            for (let i = 0; i < this.total; i++) {
              this.goods_typeid = this.tableData.types[i].goods;
            }
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //获取商品详情数据
    getGoodsTypeDetail(good) {
      this.dialogVisible = true;
      console.log(good);
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      payload.goodid = good.goodid;
      getGoodDetail(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableDetail = res.data;
            this.total_pics = res.data.pics.length;
            this.imgUrls = [];
            this.imgUrls.push(this.tableDetail.coverurl);
            for (let i = 0; i < this.total_pics; i++) {
              this.imgUrls.push(this.tableDetail.pics[i].picurl);
            }
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    // 用户通过点击关闭图标或遮罩关闭 Dialog 时起效的回调函数
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    // 复制成功时的回调函数
    onCopy(e) {
      this.$message.success("内容已复制到剪切板！");
    },
    // 复制失败时的回调函数
    onError(e) {
      this.$message.error("抱歉，复制失败！");
    },
    // //购买
    // onPurchase() {
    //   let payload = {};
    //   payload.userId = localStorage.getItem("userId");
    //   // payload.goodId =
    //   // payload.password =
    //   doPurchase(payload)
    //     .then((res) => {
    //       console.log(res);
    //       if (res.status == "OK") {
    //         this.$message.success("购买成功");
    //         this.$router.push("/admin/index");
    //       } else {
    //         this.$message.error("购买成功");
    //       }
    //     })
    //     .catch((err) => {
    //       EventBus.$emit("closeloading");
    //     });
    // },
  },
};
</script>
<style scoped>
.index-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 搜索区域 */

.search-box {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0%;
  display: flex;
  flex-direction: row;
}
.div_1 {
  position: relative;
  left: 50%;
}
.div_2 {
  position: relative;
  left: 50%;
}
.div_3 {
  position: relative;
  left: 50%;
}
.searchbutton {
  background: #2F2F2F;
  border: 1px solid #2F2F2F;
}
.search {
  margin: 0% 3%;
  width: 56px;
}
/deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 5px solid #292929;
  border-radius: 20px;
  font-family: "Youshebiaotihei";
  font-size: 20px;
}
.index-buttom {
  width: 100%;
  height: 100%;
  margin: auto;
}
.text_style {
  display: flex;
  font-family: "Youshebiaotihei";
}
.chinese {
  color: #a2662f;
  font-size: 28px;
  margin-left: 80px;
}
.english {
  color: #ead3c2;
  font-size: 20px;
  margin-left: 20px;
  margin-top: 5px;
}
.div_ {
  width: 95%;
  overflow: hidden;
  padding: 15px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 70px;
}
.div_n {
  position: relative;
  width: calc(25% - 30px);
  height: 250px;
  float: left;
  margin-right: 30px;
  margin-bottom: 20px;
}
/* 图片大小 */
.img_size {
  /* width: 300px;
  height: 250px; */
  width: 100%;
  height: 100%;
}
/* 悬浮的文字 */
.floattext {
  position: absolute;
  bottom: 30px;
  right: 50px;
  color: #fdfdfd;
  font-family: "Youshebiaotihei";
  font-size: 28px;
}
.classes {
  display: flex;
  flex-direction: column;
}
.class_ul {
  margin-top: 30px;
  margin-left: 1%;
}
.line {
  width: 23%;
  height: 300px;
  list-style-type: none;
  margin-left: 20px;
  float: left;
  /* height:200px; */
  margin-bottom: 8px;
  background: rgb(68, 67, 67);
}
.imgclass {
  width: 30%;
  height: 120px;
}
.img2 {
  width: 30%;
  height: 120px;
  margin-bottom: 30px;
  margin-left: 0.3px;
  border-radius: 2%;
}
.el-icon-arrow-right {
  color: #ead3c2;
  font-size: 20px;
  margin-left: 15px;
  margin-top: 8px;
}
/* 商品详情 */
.goodsDetails /deep/.el-dialog__header {
  background-color: #1e1e1e;
}
.goodsDetails /deep/.el-dialog__body {
  background-color: #1e1e1e;
}
.goodsDetails /deep/.el-dialog__footer {
  background-color: #1e1e1e;
  color: #333;
  text-align: center;
}
.goodsDetails /deep/.el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
}
.goodsDetails /deep/.el-dialog__headerbtn i {
  color: #eeeeee;
}
.detailsContainer {
  background-color: #1e1e1e;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.row_1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.row_2 {
  margin-top: 20px;
  margin-left: 20px;
}
.column_1 {
  height: 300px;
  width: 250px;
}
.column_2 {
  margin-left: 50px;
}
.imgsize {
  width: 250px;
  height: 250px;
}
.imgsizeIcon {
  margin-left: 10px;
  width: 30px;
  height: 30px;
}
.goodnameSpan {
  font-family: 优设标题;
  font-size: 32px;
  color: #a2662f;
}
.card_limit .el-card {
  background-color: #1e1e1e;
  border: #1e1e1e;
  margin: 0px;
  padding: 0px;
}
.card_limit /deep/ .el-card__body {
  padding: 0px;
  padding-top: 20px;
}
.downloadLink {
  height: 35px;
  font-size: 25px;
  align-items: center;
  color: #cecece;
  padding-left: 5px;
}
.copyLink {
  height: 25px;
  font-size: 20px;
  color: #cecece;
  padding-left: 20px;
  padding-top: 20px;
}
.font_style1 {
  font-family: 优设标题;
  font-size: 15px;
  color: #cecece;
}
.font_style2 {
  font-family: Alibaba-PuHuiTi;
  font-size: 17px;
  color: #cecece;
}
.font_style3 {
  font-family: 优设标题;
  font-size: 25px;
  color: #cecece;
}
.font_style3_xiazai {
  font-family: 优设标题;
  font-size: 18px;
  color: #cecece;
  margin-left: 10px;
  margin-top: 6px;
}
/* .xiazai {
  margin-top: -18px;
} */
.buybutton {
  width: 360px;
  height: 35px;
  margin-top: 10px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  background-color: #8E8E8E;
  color: #fdfdfd;
  border: 0px;
  font-size: 25px;
}
.details-card {
  margin-top: 10px;
  background-color: #1e1e1e;
  width: 600px;
  height: 150px;
  border: 3px solid #666666;
  border-radius: 5px;
}
.records {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: 优设标题;
  font-size: 15px;
  color: #cecece;
}
/* 订单详情 */
/* header部分 */
.orderDetails /deep/.el-dialog {
  width: 500px;
}
.orderDetails /deep/.el-dialog__header {
  background-color: #aeaeae;
  width: 500px;
}
.orderDetails /deep/.el-dialog__title {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 36px;
  line-height: 24px;
}
.orderDetails /deep/.el-dialog__headerbtn {
  position: absolute;
  top: 13px;
  right: -9px;
  font-size: 28px;
}
.orderDetails /deep/.el-dialog__headerbtn i {
  color: #eeeeee;
}
.orderDetails /deep/.el-dialog__body {
  background-color: #1e1e1e;
  width: 500px;
  height: 400px;
}
.orderDetails /deep/.el-dialog__footer {
  background-color: #1e1e1e;
  color: #333;
  text-align: center;
}
.orderContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.order {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.div2 {
  margin-left: 25px;
}
.div3 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 25px;
}
.amount {
  display: flex;
  justify-content: flex-end;
}
.buyclick {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.imgsizeOrder {
  width: 150px;
  height: 150px;
}
.imgsizeSign {
  width: 30px;
  height: 30px;
  margin-top: 28px;
}
.font_style4 {
  font-family: 优设标题;
  font-size: 25px;
  color: #8e8e8e;
}
.font_style5 {
  font-family: 优设标题;
  font-size: 35px;
  color: #8e8e8e;
}
.buybutton_style {
  height: 50px;
  width: 150px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #fdfdfd;
  background-color: #d67025;
  font-size: 35px;
}
.font_style6 {
  font-family: 优设标题;
  font-size: 35px;
  color: #3f3f3f;
}
/* 支付页面 */
.payment /deep/.el-dialog__header {
  background-color: #d0d0d0;
}
.payment /deep/.el-dialog__body {
  background-color: #d0d0d0;
}
.payment /deep/.el-dialog__footer {
  background-color: #d0d0d0;
  color: #d0d0d0;
}
.payment /deep/.el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
}
.payment /deep/.el-dialog__headerbtn i {
  color: #ffffff;
}
.amount_1 {
  display: flex;
  justify-content: center;
}
.payment_select {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.radiotwo {
  position: relative;
  left: 0px;
}
.el-radio {
  margin-right: 0px;
}
.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0px;
}
.el-radio.is-bordered.is-checked {
  border-color: #3f3f3f;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #3f3f3f;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #3f3f3f;
  background: #3f3f3f;
}
</style>]